<template>
  <div class="container m-auto h-screen flex flex-col gap-10 max-w-650px p-x-20px p-y-10px">
    <div>
      <Editor @save="fetchNoteDbDocList" />
    </div>
    <div class="overflow-y-scroll">
      <NoteList :noteDbDocList="NoteDbDocList" @afterDelete="fetchNoteDbDocList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Editor from './editor/index.vue'
import storeService, { NoteDbDoc } from '../store/index'
import NoteList from './note-list/index.vue'

const NoteDbDocList = ref<Array<NoteDbDoc>>([])

const fetchNoteDbDocList = async () => {
  NoteDbDocList.value = await storeService.findMany()
}
fetchNoteDbDocList()

</script>
<style scoped>

</style>